<template>
<div class="app-container">
  <div>
    <el-form :rules="rules" ref="targetForm" :model="temp" label-width="100px" label-position='top' size="small">
      <el-row :gutter="20">
        <el-col :span="3" :offset="1" style="text-align: right;padding-top: 10px;">
          <span>接收人：</span>
        </el-col>
        <el-col :span="18" style="padding: 2px 0 2px 0;">
            <el-input v-model="temp.accepter" placeholder="接收人手机号码"></el-input>
        </el-col>
        <el-col :span="3" :offset="1" style="text-align: right;padding-top: 10px;">
          <span>短信模版：</span>
        </el-col>
        <el-col :span="18" style="padding: 2px 0 2px 0;">
            <el-input v-model="temp.templateCode" placeholder="阿里短信模版编码"></el-input>
        </el-col>
        <el-col :span="3" :offset="1" style="text-align: right; padding-top: 10px;">
          <span>短信参数：</span>
        </el-col>
        <el-col :span="18">
          <ul>
            <li>{</li>
            <li v-for="value in temp.templateParams">
              <span style="margin-left: 20px;">&nbsp;</span>
              <el-input v-model="value.key" placeholder="key" size="mini" style="width: 100px"></el-input>
              <span style="font-weight: bold; margin: 0 6px 2px 2px;">:</span>
              <el-input v-model="value.value" placeholder="value" size="mini" style="width: 100px"></el-input>
            </li>
            <li>
              <span style="margin-left: 20px;">&nbsp;</span>
              <el-input v-model="newTemplateParam.key" placeholder="key" size="mini" style="width: 100px"></el-input>
              <span style="font-weight: bold; margin: 0 6px 2px 2px;">:</span>
              <el-input v-model="newTemplateParam.value" placeholder="value" size="mini" style="width: 100px"></el-input>
              <el-button type="success" icon="el-icon-check" size="mini" circle @click="addTemplateParam"></el-button>
            </li>
            <li>}</li>
          </ul>
        </el-col>
        <el-col :span="3" :offset="1" style="text-align: right;padding-top: 10px;">
          <span>短信签名：</span>
        </el-col>
        <el-col :span="18" style="padding: 2px 0 2px 0;">
          <el-input v-model="temp.signName" placeholder="阿里短信签名"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="padding-top:20px;">
        <el-col style="text-align: right;">
          <el-button size="small" class="filter-item" type="primary" @click="saveData">发 送</el-button>
          <el-button size="small" class="filter-item" @click="closeSelf">取 消</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</div>
</template>

<script>
import {
    newAlismsNotice
} from '@/api/message/index'
import {
  statusOptions,
  isInnerOption
} from '@/utils/allOptions'
export default {
  name: 'newAlismsNotice',
  data() {
    return {
      // -------Options-----------
      statusOptions,
      isInnerOption,
      newTemplateParam: {
          key: '',
          value: ''
      },
      temp: {
          accepter: '',
          templateCode: '',
          templateParams: [],
          signName: ''
      },
      rules: {
         accepter: [{
          required: true,
          message: '请输入消息接收人邮箱地址',
          trigger: 'blur'
        },
        {
          min: 0,
          max: 100,
          message: '长度在 0 到 100 个字符',
          trigger: 'blur'
        },
        {
          max: 100,
          message: '最大 100 个字符',
          trigger: 'blur'
        }
        ]
      }
    }
  },
  methods: {
    addTemplateParam() {
      console.log(this.newTemplateParam)
      var newParam = {}
      newParam.key = this.newTemplateParam.key
      newParam.value = this.newTemplateParam.value
      this.temp.templateParams.push(newParam)

      console.log(this.temp.templateParams)
      this.newTemplateParam.key = ''
      this.newTemplateParam.value = ''
    },
    saveData() {
      this.$refs.targetForm.validate(valid => {
        if (valid) {
            newAlismsNotice(this.temp).then(() => {
            this.$notify({
              title: '成功',
              message: '通知通知已发送',
              type: 'success',
              duration: 2000
            })
            this.$emit('changeCloseDialog')
            // this.$router.push({ name: 'roleManagement' })
          })
        }
      })
    },
    closeSelf() {
      this.$emit('changeCloseDialog')
    }
  }
}
</script>

